import { transformAttributes, getInnerHtml } from "@/utils";
import { type, attributeMapping } from "@/const/mapConfig";

export const eventTarget = new window.mars3d.BaseClass(); // 事件总线
export default class PrimitiveLoader {
  map3d: any;
  primitiveLayer: any;
  billboardLayer: any;//图标点
  wallLayer: any; //墙
  heatLayer: any;//热力图
  clusterLayer: any; //聚合图层
  imgPlane: any; //事故详情图片面

  constructor(map3d) {
    this.map3d = map3d;
    this.primitiveLayer = new window.mars3d.layer.GraphicLayer();
    this.billboardLayer = [];
    this.wallLayer = [];
    this.clusterLayer = null;
    this.heatLayer = [];
    this.imgPlane = null;
    this.map3d.addLayer(this.primitiveLayer);
  }

  addPointPrimitive(position, image, attr) {
    this.addClusterLayer();
    const graphic = new window.mars3d.graphic.BillboardPrimitive({
      position,
      style: {
        image,
        width: 30,
        height: 30,
        horizontalOrigin: window.Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: window.Cesium.VerticalOrigin.BOTTOM,
        visibleDepth: false
      },
      attr
    })

    this.clusterLayer.addGraphic(graphic); //聚合图层

    graphic.on(window.mars3d.EventType.click, async (event) => {
      const attr = event.graphic.attr;
      if (attr.image.includes('monitor')) {
        eventTarget.fire('monitorClick', attr);
      } else if (attr?.ids) {
        return;
      } else {
        const html = transformAttributes(attr, attr.image, attributeMapping);
        graphic.bindPopup(getInnerHtml(type[attr.image], [html])).openPopup();
      }
    })
  }

  //添加聚合点
  addClusterLayer() {
    if (!this.clusterLayer) {
      this.clusterLayer = new window.mars3d.layer.GraphicLayer({
        clustering: {
          enabled: true,
          pixelRange: 10,
        },
      });
      this.map3d.addLayer(this.clusterLayer);
    }
  }

  // 施工点位对于得面数据
  addPrimitiveLayer(position) {
    const positions = window.mars3d.PolyUtil.getRectPositionsByCenter({
      center: position,
      width: 100,
      height: 100
    })
    const graphic = new window.mars3d.graphic.WallPrimitive({
      positions,
      style: {
        closure: true,
        diffHeight: 50,
        color: "#14b8a6",
        opacity: 0.6,
        classificationType: window.Cesium.ClassificationType.CESIUM_3D_TILE,
      },
    })
    this.primitiveLayer.addGraphic(graphic);
    this.wallLayer.push(graphic);
  }

  // 热力图
  loadHeatmap(heatMapData: any) {
    // 热力图 图层
    const heatLayer = new window.mars3d.layer.HeatLayer({
      positions: heatMapData,
      heatStyle: {
        radius: 20,
        blur: 0.85,
        gradient: {
          0: "blue",
          0.25: "#ffdd2f",
          0.5: "#fa6c20",
          0.75: "#fe4a33",
          1: "#ff0000"
        },
      },
      rectangle: { xmin: 111.607806, ymax: 28.248730, xmax: 113.353187, ymin: 26.407331 },
      // 以下为矩形矢量对象的样式参数
      style: {
        // classificationType: window.Cesium.ClassificationType.CESIUM_3D_TILE,
        clampToGround: true
      },
      redrawZoom: true, // 视角缩放时是否进行按新的raduis进行渲染。
      flyTo: false
    });
    this.map3d.addLayer(heatLayer);
    this.heatLayer.push(heatLayer);
  }

  // 事故详情点位
  loadAccident(position, image, row) {
    this.removeAccidentPlan();
    this.imgPlane = new window.mars3d.graphic.BillboardPrimitive({
      position,
      style: {
        image,
        width: 40,
        height: 40,
        horizontalOrigin: window.Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: window.Cesium.VerticalOrigin.BOTTOM,
        visibleDepth: false
      },
      attr:row
    })

    this.primitiveLayer.addGraphic(this.imgPlane);

    this.imgPlane.on(window.mars3d.EventType.click, async (event) => {
      eventTarget.fire('loadAccident', event.graphic.attr);
    })

    this.imgPlane.autoSurfaceHeight({ has3dtiles: true, splitNum: 10 }).then(() => {
      this.imgPlane = this.imgPlane;
    });
  }

  removeAccidentPlan(){
    this.primitiveLayer.removeGraphic(this.imgPlane);
  }

  // 删除热力图
  removeHeatLayer() {
    this.removeFeatures(this.heatLayer);
  }

  // 删除点聚合
  deleteClusterGraphic() {
    if (this.clusterLayer) {
      this.clusterLayer.remove();
      this.clusterLayer = null;
    }
  }

  // 删除图层数据
  removeFeatures(features, removalMethod = 'remove') {
    for (let i = features.length - 1; i >= 0; i--) {
      const feature = features[i];
      feature[removalMethod]();
      features.splice(i, 1);
      this.map3d.removeLayer(feature, true);
    }
  }

  clearAllMapLayers() {
    this.removeFeatures(this.wallLayer);
    this.deleteClusterGraphic();
    this.removeHeatLayer();
    this.removeFeatures(window.cesiumInit.draw.HeatLayerPoint);
  }
}
